<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>让坦克开起来</title>
		<style type="text/css">
			input{font-size:26px;margin-top: 20px;}
			body{background-image: url(images/grassland.png);}
			#myTank{position: absolute;left:10px;top:100px}
		</style>
	</head>
	<body>		
		<img id="myTank" src="images/down.png"/>
		<script>
         let tank = document.getElementById("myTank");
         // 获取浏览器可视区域的宽高
         let bigHei = window.innerHeight;
         let bigWid = window.innerWidth;
  
         //键盘keyCode码---W:87   S:83   A:65    D:68
         document.onkeydown = function (e) {
             // 坦克每上下左右移动时，增加或减少10px的偏移量，得到一个新的坐标
  
             //坦克上移
             if (e.keyCode == "87") {
                 tank.src = "images/up.png";
                 if (tank.offsetTop >= 0) {
                     tank.style.top = tank.offsetTop - 10 + "px";
                 }
             }
             //坦克下移
             else if (e.keyCode == "83") {
                 tank.src = "images/down.png";
                 if (tank.offsetTop <= bigHei) {
                     tank.style.top = tank.offsetTop + 10 + "px";
                 }
             }
  
             //坦克左移
             else if (e.keyCode == "65") {
                 tank.src = "images/left.png";
                 if (tank.offsetLeft >= 0) {
                     tank.style.left = tank.offsetLeft - 10 + "px";
                 }
             }
  
             //坦克右移
             else if (e.keyCode == "68") {
                 tank.src = "images/right.png";
                 if (tank.offsetLeft <= bigWid) {
                     tank.style.left = tank.offsetLeft + 10 + "px";
                 }
             }
  
         }
		</script>
	</body>
</html>
